<template>
    <div>
        <span @click="dialogVisible = true"></span>
        <el-dialog v-model="dialogVisible" size="tiny" @close="goHomeAndReset">
            <el-form :model="user" ref="login" label-width="100px" class="demo-dynamic">
                <el-form-item
                        prop="account"
                        key="account"
                        label="邮箱"
                        :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }]"
                >
                    <el-input v-model="user.account"></el-input>
                </el-form-item>
                <el-form-item
                        label="密码"
                        key="password"
                        prop="password"
                        :rules="{required: true, message: '密码不能为空', trigger: 'blur'}">
                    <el-input v-model="user.password" type="password"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="login('login')">登录</el-button>
                <el-button @click="register('login')">注册</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        mounted(){
            if (this.$route.fullPath === '/login') {
                this.dialogVisible = true
            }
        },
        data() {
            return {
                user: {
                    account: null,
                    password: null,
                },
                dialogVisible: false
            };
        },
        methods: {
            goHomeAndReset(){
                if (this.$route.fullPath === '/login') {
                    this.$router.push('/');
                }
//                this.user.account = null;
//                this.user.password = null
            },
            login(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogVisible = false;
                        this.$store.dispatch('login', this.user)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            register(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>
<style>

</style>